<script setup lang="ts">
import { ref } from 'vue'

defineOptions({
  name: 'aidraw-page'
})
const prompt = ref('')
// https://xianyu110.github.io/doubao/
</script>

<template>
  <div class="w-screen h-screen flex justify-center items-center bg-[#edebeb]">
    <main
      class="w-[600px] h-[80%] bg-pink-50 border border-gray-300 rounded-lg shadow-lg overflow-hidden flex flex-col"
    >
      <header
        class="w-full h-[150px] bg-[#18a058] flex justify-center items-center flex-col text-white"
      >
        <p class="font-bold text-3xl">AI图像生成器</p>
        <p class="text-xl mt-2">借助AI的力量, 创造精美的图像</p>
      </header>
      <main class="w-full h-[calc(100%-150px)] bg-white p-[20px]">
        <p class="mb-2 text-xl">你的提示词</p>
        <n-input
          v-model:value="prompt"
          type="textarea"
          placeholder="例如:一只戴着礼帽、非常可爱的猫咪的真实感照片"
        ></n-input>
        <n-button class="mt-4 w-full" type="primary" size="large">生成</n-button>
      </main>
    </main>
  </div>
</template>

<style scoped lang="scss"></style>
